@media screen and (min-width: 414px) {
  html {
    font-size: 41.4px !important;
  }
}
body {
  min-width: 320px;
  max-width: 414px;
  width: 10rem;
  height: 20.748792rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.playermain {
  flex: 1;
  overflow: hidden;
  background-color: #aaa;
  position: relative;
  display: flex;
  align-items: center;
}
.playermain #video {
  width: 100%;
}
.playermain div {
  position: absolute;
  bottom: 0.483092rem;
  left: 0.483092rem;
}
.playerfoorter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 2.173913rem;
  background-color: #eee;
}
.playerfoorter p {
  font-size: 1.207729rem !important;
  z-index: 20;
  cursor: pointer;
}
.progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.173913rem;
  background-color: rgba(0, 0, 255, 0.2);
  z-index: 10;
}
#Mask {
  width: 10rem;
  height: 20.748792rem;
  position: fixed;
  z-index: 30;
  background-color: rgba(135, 206, 235, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
}
#Mask .clickbtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 7.246377rem;
}
#Mask .clickbtn div {
  width: 2.415459rem;
  height: 2.415459rem;
  border-radius: 1.207729rem;
  color: white;
  font-size: 1.690821rem !important;
  text-align: center;
  line-height: 2.415459rem;
  cursor: pointer;
}
#Mask .clickbtn div:nth-child(1) {
  background-color: pink;
}
#Mask .clickbtn div:nth-child(2) {
  background-color: skyblue;
}
